import React, { PureComponent } from 'react'
import { connect } from "react-redux";
import dayjs from "dayjs";
import notify from "@utils/tip";
import { Tabs, Button } from 'antd'
import { withRouter } from "react-router-dom";
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
import { WarehouseSelect } from '@components/warehouse/WarehouseSelect'
import CustomizeTableProvide, {CustomizeTable, CustomizeTablePagination} from "@common/presentational/CustomizeTable";
import { 
    getInventoryPurchaseList,
    getInventoryPurchaseInfo
} from "@sagas/warehouse/purchase";
import DateRangePicker from "@common/presentational/DateRangePicker";
import {priceFenToYuan, priceYuanToFen} from "@utils/priceConversion";
import ParamsInput from "@common/presentational/ParamsInput";
import BilinIcon from "@common/presentational/BilinIcon";

@connect(({ warehouseManagement, purchase }) => ({
    inventoryPurchaseList: purchase.inventoryPurchaseList,
    selectedWarehouse: warehouseManagement.selectedWarehouse
}), {
    getInventoryPurchaseList,
    getInventoryPurchaseInfo
})
@withRouter
class PurchaseManage extends PureComponent {
    constructor(props) {
        super(props);
        const {
            startDate = dayjs().subtract(1, 'month').add(1, 'days').format('YYYY-MM-DD'),
            endDate = dayjs().format('YYYY-MM-DD'),
            warehouseId = props.selectedWarehouse,
            queryStatus = '1',
            queryOrderNumber = '',
        } = getQuery(props.history)
        this.state = {
            startDate,
            endDate,
            warehouseId,
            queryStatus,
            queryOrderNumber,
        }

        this.tableRef = React.createRef()
        this.getTableInfo = this.getTableInfo.bind(this)
        this.paginationInfo = {}
        this.columns = [{
            title: '单据编号',
            dataIndex: 'order_number',
            key: 'order_number',
            width:'300px'
        }, {
            title: '入库时间',
            dataIndex: 'create_time',
            key: 'create_time',
            width: 180,
        },{
            title: '类型',
            dataIndex: 'direction',
            key: 'direction',
            render: text => text === 1 ? '采购入库' : '采购退货'
        }, {
            title: '产品项数',
            dataIndex: 'detail_count',
            key: 'detail_count',
        }, {
            title: '采购金额',
            dataIndex: 'total',
            key: 'total',
            render: text => priceFenToYuan(text)
        }, {
            title: '备注',
            dataIndex: 'memo',
            key: 'memo',
        },{
            title: '操作',
            key: 'operation',
            width: '15%',
            render: (text, record) =>
                <div className="flex-vertical-center">
                    {record.direction === 1 ?
                        <div className="mgr-8 ft-hover" onClick={this.goBackGoods.bind(this,record)}>采购退货</div>
                        : null}
                    <div className="mgr-8 ft-hover" onClick={this.goDetail.bind(this,record)}>详情</div>
                </div>
        }]
        this.goPurchase = this.goPurchase.bind(this)
    }

    goBackGoods(record){
        const { warehouseId } = this.state
        const { history } = this.props
        this.props.getInventoryPurchaseInfo({
            id: warehouseId,
            orderNumber: record.order_number
        }, (res) => {
            history.push({
                pathname: `/warehouse/purchase-back/${record.order_number}`,
                state: {
                    ...res
                }
            })
        })
    }

    goDetail(record){
        const { warehouseId } = this.state
        const { history } = this.props
        this.props.getInventoryPurchaseInfo({
            id: warehouseId,
            orderNumber: record.order_number
        }, (res) => {
            history.push({
                pathname: `/warehouse/purchase-detail/${record.order_number}`,
                state: {
                    ...res
                }
            })
        })
    }

    handleValueChange(key, value) {
        if (key === 'dateRange') {
            this.setState({
                ...value
            }, this.initTable)
            return;
        }
        this.setState({
            [key]: value
        }, this.initTable)
    }

 
    getTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { startDate, endDate, queryStatus, queryOrderNumber, warehouseId } = this.state
        warehouseId && this.props.getInventoryPurchaseList({
            id: warehouseId,
            startDate,
            endDate,
            // queryStatus,
            queryOrderNumber,
            pageNo: current,
            pageSize,
        })
        this.setUrlQuery()
    }

    goPurchase() {
        this.props.history.push(`/warehouse/purchase-create`)
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    setUrlQuery() {
        const { current, pageSize } = this.paginationInfo
        const { startDate, endDate, queryStatus, queryOrderNumber, warehouseId } = this.state
        const { history } = this.props
        let params = {
            startDate, endDate,
            // queryStatus,
            queryOrderNumber,
            warehouseId, current, pageSize
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    render() {
        const { inventoryPurchaseList } = this.props
        const { startDate, endDate, queryStatus, queryOrderNumber, warehouseId, } = this.state
        return (
            <>
            <Button type="primary" className="button-small mgb-16" onClick={this.goPurchase} ><BilinIcon type="plus" className="ft-18 mgr-8"/>新建采购单</Button>
            <div className="table-scroll-container warehouse-order-page" style={{height:'calc(100% - 58px)'}}>
                <div className="table-params page-params flex-vertical-center mgb-16">
                    <WarehouseSelect 
                        value={warehouseId}
                        onChange={this.handleValueChange.bind(this, 'warehouseId')}
                    />
                    <DateRangePicker
                        className="mgl-16"
                        startDate={startDate}
                        endDate={endDate}
                        onChange={this.handleValueChange.bind(this, 'dateRange')}
                        beforeNow
                    />
                    <ParamsInput
                        className="mgl-16"
                        style={{ width: '140px' }}
                        value={queryOrderNumber}
                        onChange={this.handleValueChange.bind(this, 'queryOrderNumber')}
                        placeholder="订单编号"
                    />
                    {/* <Tabs className="mgt-8"
                        activeKey={String(queryStatus)}
                        className='tabs-status'
                        onChange={this.handleValueChange.bind(this, 'queryStatus')}
                    >
                        <Tabs.TabPane tab='采购入库' key='1' />
                        <Tabs.TabPane tab='退货出库' key='2' />
                    </Tabs> */}
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="warehouseOrderList" onChange={this.getTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={this.columns}
                            dataSource={inventoryPurchaseList.orders || []}
                            pagination
                        />
                    </div>
                    <div className="table-pagination">
                        <CustomizeTablePagination
                            total={inventoryPurchaseList.total}
                        />
                    </div>
                </CustomizeTableProvide>
            </div>
            </>
        )
    }
}

export default PurchaseManage